{% extends "indexSimple.html"%}

{% block content %}
<div>
	<div id="loginForm" class="login_wrapper">
		<div class="animate form login_form">
			<section class="login_content">
				<form>
					<h1>Login Form</h1>
					<div>
						<input type="text" v-model:value="userName" class="form-control" 
							placeholder="Username" required="" />
					</div>
					<div>
						<input type="password" v-model:value="password" class="form-control" 
							placeholder="Password" required="" />
					</div>
					<div>
						<input class="form-control input-val" type="text" v-model:value="inputNum" 
							placeholder="请输入验证码（不区分大小写）" 
							style="float:left; width:65%; margin-bottom: 0px;" />
						<canvas id="canvas" @click="drawNum(showNum)" width="100" height="36" ></canvas>
					</div>
					<div style="text-align:left; margin-top: 5px; margin-left: 3px;">
						<input type="checkbox" v-model:value="rememberMe" lay-filter="filter"
							   style="float: left;" lay-skin="primary" title="30天内自动登录" >30天内自动登录
					</div>
					<div>
						<a @click="login()" class="btn btn-default submit" href="javascript:void(0);">Log in</a>
						<a class="reset_pass" href="#">Lost your password?</a>
					</div>
					<div class="clearfix"></div>
					<div class="separator">
						<p class="change_link">
							New to site? <a href="/register" class="to_register"> Create Account </a>
						</p>
						<div class="clearfix"></div>
						<br />
						<div>
							<h1>
								<i class="fa fa-paw"></i> Gentelella Alela!
							</h1>
							<p>©2016 All Rights Reserved. Java Spring Boot!</p>
						</div>
					</div>
				</form>
			</section>
		</div>
	</div>
</div>

<script stype="text/javascript">
	var user = new Vue({
		el: "#loginForm",
		data: {
			userName: "",
			password: "",
			showNum: [],
			inputNum: "",
			rememberMe: false,
		},
		methods: {
			login: function () {
				var user = {};
				user.userName = this.userName;
				user.password = this.password;
				user.rememberMe = this.rememberMe;
				console.log(user);

				/*if (this.inputNum == "") {
					layer.msg("Please input Verification Code.", {icon: 0});
					return;
				} else if (this.inputNum != this.showNum.join("")) {
					layer.msg("The input code is error", {icon: 0});
					return;
				}*/
				
				$.ajax({
					url : "/loginUser?userName=" + this.userName + "&password=" + this.password,
					type : "get",
					success : function (rs) {
						if (rs.status == 200) {
							window.location.href = "/dashboard";
						} else {
							layer.msg(rs.message, {icon: 0});
						}
					},
					error : function (rs) {
						layer.msg(rs.responseText, {icon: 0});
					}
				});
			},
			// 动态验证码
			drawNum: function (show_num) {
				var canvas_width=$('#canvas').width();
				var canvas_height=$('#canvas').height();
				var canvas = document.getElementById("canvas");
				var context = canvas.getContext("2d");
				canvas.width = canvas_width;
				canvas.height = canvas_height;
				var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
				var aCode = sCode.split(",");
				var aLength = aCode.length;
				
				for (var i = 0; i <= 3; i++) {
					var j = Math.floor(Math.random() * aLength);
					var deg = Math.random() * 30 * Math.PI / 180;
					var txt = aCode[j];
					show_num[i] = txt.toLowerCase();
					var x = 10 + i * 20;
					var y = 20 + Math.random() * 8;
					context.font = "bold 23px 微软雅黑";

					context.translate(x, y);
					context.rotate(deg);

					context.fillStyle = this.randomColor();
					context.fillText(txt, 0, 0);

					context.rotate(-deg);
					context.translate(-x, -y);
				}
				for (var i = 0; i <= 5; i++) {
					context.strokeStyle = this.randomColor();
					context.beginPath();
					context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
					context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
					context.stroke();
				}
				for (var i = 0; i <= 30; i++) {
					context.strokeStyle = this.randomColor();
					context.beginPath();
					var x = Math.random() * canvas_width;
					var y = Math.random() * canvas_height;
					context.moveTo(x, y);
					context.lineTo(x + 1, y + 1);
					context.stroke();
				}
			},
			randomColor: function () {
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
		},
		mounted: function() {
			this.drawNum(this.showNum);
		},
	});
</script>
{% endblock content %}